<template>
	<div>
		<view class="option-container">
			<!-- 用v-for迭代父组件给我们的选项 -->
			<view class="option-block" :class="{choosed: nowFilterChinese == '价格' ? nowChoosedPrice == item.value : nowChoosedArr.includes(item.value)}" v-for="item in options" :key="item.value" @click="optionBlockHandler(item.value)">
				{{item.valueDesc}}
				{{item.value}}
			</view>
		</view>
		
		<view class="btn-box">
			<!-- 点击取消按钮的时候，只需要$emit一个cancel事件即可，没有参数 -->
			<button class="cancelBtn" @click="$emit('cancel')">取消</button>
			<!-- 点击确定按钮的时候，要$emit告诉爸爸 -->
			<button class="okBtn" @click="okHandler()">确定</button>
		</view>
	</div>
</template>

<script>
	export default {
		// 迎接父组件给我们的所有选项
		props: ['nowFilterChinese', 'options', 'cfArr', 'cfPrice'],
		data() {
			return {
				// 当前选中了的，里面放的是特征值，就是item.value
				// nowChoosedArr的默认值是父亲的this.cfArr。
				nowChoosedArr: [...this.cfArr],
				// 价格的默认值
				nowChoosedPrice: this.cfPrice
			};
		},
		methods: {
			// 点击选项的时候做的事情 
			optionBlockHandler(value) {
				// 看当前是不是价格，价格是单选
				if (this.nowFilterChinese != '价格') {
					// 多选
					// 如果value已经在数组中了，那么删除
					// 如果不在，那么push
					if (this.nowChoosedArr.includes(value)) {
						// 删除。古代哲人Danny老师说的“删fil改map”
						this.nowChoosedArr = this.nowChoosedArr.filter(item => item != value);
					} else {
						this.nowChoosedArr.push(value);
					}
				} else {
					if (this.nowChoosedPrice == value) {
						this.nowChoosedPrice = '';
					} else {
						this.nowChoosedPrice = value;
					}
				}
			},
			okHandler(item) {
				this.$emit('ok', {
					nowChoosedPrice: this.nowChoosedPrice,
					nowChoosedArr: this.nowChoosedArr
				});
			}
		},
		watch: {
			// 当用户点击了父组件的filter-tab，父亲的nowFilterTabIndex就变了，从而引发传给我们的nowFilterChinese就变了
			// 说白了，就是当用户切换筛选的时候，那么触发
			nowFilterChinese() {
				this.nowChoosedArr = [...this.cfArr];
				this.nowChoosedPrice = this.cfPrice
			}
		}
	}
</script>

<style>
	.option-container {
		display: flex;
		/* 允许子元素换行，默认情况下，是不允许的 */
		flex-wrap: wrap;
		padding: 10px;
		 
	}
	.option-block {
		width: 40%;
		border: 1px solid #cdcdcd;
		margin-bottom:  6px;
		margin-right:  20px;
		border-radius: 20px;
		height: 28px;
		line-height: 28px;
		padding-left:10px;
		font-size: 12px;
		background-color: white;
	}
	.option-block.choosed {
		background-color: gold;
	}
	.btn-box {
		display: flex;
		justify-content: space-around;
	}
	.btn-box .cancelBtn {
		width: 300rpx;
		background-color: white;
	}
	.btn-box .okBtn {
		width: 300rpx;
		background-color: #26ca1d;
	}
</style>